<template>
  <div class="mobile-cancel-dialog" v-if="visible">
    <div class="dialog-overlay" @click="handleClose"></div>
    <div class="dialog-content">
      <div class="dialog-header">
        <div class="dialog-title">销课</div>
        <div class="close-btn" @click="handleClose">×</div>
      </div>
      <div class="dialog-body">
        <div class="info-item">
          <div class="info-label">学生姓名</div>
          <div class="info-value">{{ studentInfo.studentName || '未知' }}</div>
        </div>
        <div class="info-item">
          <div class="info-label">剩余课时</div>
          <div class="info-value">{{ (studentInfo.classSurplusTime || 0) }}课时</div>
        </div>
        <div class="form-item">
          <div class="form-label">销课时数</div>
          <div class="number-picker">
            <button
              class="number-btn minus"
              :disabled="xknumber <= 1"
              @click="decreaseCancelCount"
            >-</button>
            <input
              type="number"
              class="number-input"
              v-model.number="xknumber"
              :min="1"
              :max="studentInfo.classSurplusTime || 0"
              @input="handleCountInput"
            >
            <button
              class="number-btn plus"
              :disabled="xknumber >= (studentInfo.classSurplusTime || 0)"
              @click="increaseCancelCount"
            >+</button>
          </div>
        </div>
        <div class="form-item" v-if="xknumber > 1">
          <div class="form-label">销课原因</div>
          <textarea
            class="form-textarea"
            v-model="cancelReason"
            placeholder="请输入销课原因（销课时数大于1时必填）"
            rows="3"
          ></textarea>
        </div>
      </div>
      <div class="dialog-footer">
        <button class="btn btn-cancel" @click="handleClose">取消</button>
        <button class="btn btn-confirm" @click="handleConfirm">确定销课</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CancelClassDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    studentInfo: {
      type: Object,
      default: () => ({
        studentName: '',
        classSurplusTime: 0,
        id: '',
        courseId: '',
        classId: '',
        studentId: ''
      })
    },
    courseParams: {
      type: Object,
      default: () => ({
        courseStartime: '',
        counrseEndtime: '',
        teacherNumber: ''
      })
    }
  },
  data() {
    return {
      xknumber: 1,
      cancelReason: ''
    }
  },
  watch: {
    visible(newVal) {
      if (newVal) {
        this.xknumber = 1
        this.cancelReason = ''
      }
    }
  },
  methods: {
    handleClose() {
      this.$emit('update:visible', false)
      this.$emit('close')
    },

    decreaseCancelCount() {
      if (this.xknumber > 1) {
        this.xknumber--
      }
    },

    increaseCancelCount() {
      const max = this.studentInfo.classSurplusTime || 0
      if (this.xknumber < max) {
        this.xknumber++
      }
    },

    handleCountInput() {
      let count = parseInt(this.xknumber) || 1
      const max = this.studentInfo.classSurplusTime || 0

      if (count < 1) count = 1
      if (count > max) count = max

      this.xknumber = count
    },

    handleConfirm() {
      // 验证
      if (this.xknumber > 1 && !this.cancelReason.trim()) {
        this.$toast('销课时数大于1时，请填写销课原因')
        return
      }

      const cancelData = {
        xknumber: this.xknumber,
        cancelReason: this.cancelReason,
        studentInfo: this.studentInfo,
        courseParams: this.courseParams
      }

      this.$emit('confirm', cancelData)
      this.handleClose()
    }
  }
}
</script>

<style lang="scss" scoped>
.mobile-cancel-dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;

  .dialog-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
  }

  .dialog-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-radius: 16px 16px 0 0;
    max-height: 80vh;
    overflow-y: auto;
    transform: translateY(0);
    animation: slideUp 0.3s ease;
  }

  @keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }

  .dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f0;
  }

  .dialog-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
  }

  .close-btn {
    font-size: 24px;
    color: #999;
    cursor: pointer;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .dialog-body {
    padding: 20px;
  }

  .info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding: 12px 0;
    border-bottom: 1px solid #f5f5f5;
  }

  .info-label {
    font-size: 14px;
    color: #666;
  }

  .info-value {
    font-size: 14px;
    color: #333;
    font-weight: 500;
  }

  .form-item {
    margin-bottom: 20px;
  }

  .form-label {
    font-size: 14px;
    color: #333;
    margin-bottom: 8px;
    font-weight: 500;
  }

  .number-picker {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .number-btn {
    width: 44px;
    height: 44px;
    border: 1px solid #e0e0e0;
    background: white;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .number-btn:disabled {
    background: #f5f5f5;
    color: #ccc;
    cursor: not-allowed;
  }

  .number-btn:not(:disabled):hover {
    background: #f8f8f8;
  }

  .number-input {
    flex: 1;
    height: 44px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    background: white;
  }

  .number-input:focus {
    outline: none;
    border-color: #1989fa;
  }

  .form-textarea {
    width: 100%;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px;
    font-size: 14px;
    resize: none;
    font-family: inherit;
    box-sizing: border-box;
  }

  .dialog-footer {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid #f0f0f0;
  }

  .btn {
    flex: 1;
    height: 44px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
  }

  .btn-cancel {
    background: #f5f5f5;
    color: #666;
  }

  .btn-confirm {
    background: #1989fa;
    color: white;
  }

  .btn-confirm:disabled {
    background: #c8c9cc;
    cursor: not-allowed;
  }
}
</style>
